export default {
  name: "ProgressBall",
  mounted() {
    this.renderBall();

    window.onresize = () => {
      this.renderBall();
    }
  },
  props: {
    percent: {
      default: 0,
      type: [Number,String]
    }
  },

  watch: {
    percent(newVal) {
      this.renderBall();
    }
  },
  methods: {
    renderBall() {
      // var canvas = document.getElementById('c');
      var canvas = this.$refs.canvas;
      var ctx = canvas.getContext('2d');
      var nowRange = this.percent || 0; //用于做一个临时的range

      let width = document.documentElement.clientWidth

      //画布属性
      var mW = canvas.width = width / 16;
      var mH = canvas.height = width / 16;
      var lineWidth = 0.3;

      //圆属性
      var r = mH / 2; //圆心
      // var cR = r - 32 * lineWidth; //圆半径
      var cR = width / 32 - 2

      //Sin 曲线属性
      var sX = 0;
      var axisLength = mW; //轴长
      var waveWidth = 0.012; //波浪宽度,数越小越宽    
      var waveHeight = 6; //波浪高度,数越大越高
      var speed = 0.022; //波浪速度，数越大速度越快
      var xOffset = 0; //波浪x偏移量

      ctx.lineWidth = lineWidth;

      //画圈函数
      var IsdrawCircled = false;
      var drawCircle = function () {

        ctx.beginPath();
        ctx.strokeStyle = '#1080d0';
        ctx.arc(r, r, cR + 1, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(r, r, cR, 0, 2 * Math.PI);
        ctx.clip();
        IsdrawCircled = true;
      }

      //画sin 曲线函数
      var drawSin = function (xOffset, color, waveHeight) {
        ctx.save();

        var points = []; //用于存放绘制Sin曲线的点

        ctx.beginPath();
        //在整个轴长上取点
        for (var x = sX; x < sX + axisLength; x += 20 / axisLength) {
          //此处坐标(x,y)的取点，依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”
          var y = Math.sin((-sX - x) * waveWidth + xOffset) * 0.8 + 0.1;

          var dY = mH * (1 - nowRange / 100);

          points.push([x, dY + y * waveHeight]);
          ctx.lineTo(x, dY + y * waveHeight);
        }

        //封闭路径
        ctx.lineTo(axisLength, mH);
        ctx.lineTo(sX, mH);
        ctx.lineTo(points[0][0], points[0][1]);
        ctx.fillStyle = color;
        ctx.fill();

        ctx.restore();
      };

      var render = function () {
        ctx.clearRect(0, 0, mW, mH);

        if (IsdrawCircled == false) {
          drawCircle();
        }

        drawSin(xOffset + Math.PI * 0.7, 'rgba(28, 134, 209, 0.5)', 18);
        drawSin(xOffset, '#00A0FF', 18);
        drawText();

        xOffset += speed;
        requestAnimationFrame(render);
      }
      //写百分比文本函数
      var drawText = function () {
        ctx.save();

        var size = 0.4 * cR;
        ctx.font = size + 'px Microsoft Yahei';
        ctx.textAlign = 'center';
        ctx.fillStyle = "rgba(255, 255, 255, 1)";
        ctx.fillText(nowRange + '%', r, r + size / 2);
        ctx.restore();
      };

      render();
    }
  }
}